<template>
  <div class="child">
    <div>子级</div>
    <button @click="pFun">子级调用父级函数</button>
  </div>
</template>
<script setup lang="ts">
interface defineExposeTypeof {
  cFun: (msg: string) => void,
}

const cFun = (msg: string) => {
  console.log('子组件cFun方法:' + msg);
}

const emit = defineEmits(['change'])
const pFun = () => {
  emit('change', '子级消息') // 子级调用父级函数
}

// 抛出组件变量、方法、类型声明，外部父组件才能调用
defineExpose<defineExposeTypeof>({
  cFun
})
</script>
<style lang="scss" scoped>
.child {
  padding: 10px;
  border: 1px solid blue;
}
</style>
